<template>
	<el-menu :default-active="activeIndex" class="el-menu-vertical-demo" style="height: 100%;" @select="handleSelect">
		<el-sub-menu index="knowledgegraph">
			<template #title>
				<el-icon>
					<document />
				</el-icon>
				<span>数据标准化</span>
			</template>
			<el-menu-item index="graph_alignment">标准文件管理</el-menu-item>
			<el-menu-item index="graph_build">标准文件元数据抽取</el-menu-item>
			<!-- <el-menu-item index="service">特征提取</el-menu-item> -->
			<el-menu-item index="database">孤岛数据标准化</el-menu-item>
		</el-sub-menu>
		<el-menu-item index="service">
			<el-icon>
				<Menu />
			</el-icon>
			<span>敏捷服务管理</span>
		</el-menu-item>
		<el-sub-menu index="combine">
			<template #title>
				<el-icon>
					<HelpFilled />
				</el-icon>
				<span>服务组合</span>
			</template>
			<el-menu-item index="list">服务流程</el-menu-item>
			<el-menu-item index="instance_list">实例管理</el-menu-item>

		</el-sub-menu>
		<el-sub-menu index="probe">
			<template #title>
				<el-icon>
					<Position />
				</el-icon>
				<span>数据探针</span>
			</template>
			<el-menu-item index="probe_list">标准文件管理</el-menu-item>
			<el-menu-item index="probe_create">标准创建</el-menu-item>
			<!-- <el-menu-item index="service">特征提取</el-menu-item> -->
		</el-sub-menu>
		<el-sub-menu index="knowledgegraph">
			<template #title>
				<el-icon>
					<Files />
				</el-icon>
				<span>对象化知识图谱</span>
			</template>
			<el-sub-menu index="knowledgegraph">
				<template #title>实例知识图谱构建</template>
				<el-menu-item index="knowledge_extraction">知识抽取</el-menu-item>
				<el-menu-item index="knowledge_graph">知识融合</el-menu-item>
				<el-menu-item index="graph_build_instance">图谱构建</el-menu-item>
				<el-menu-item index="graph_guide">图谱导航</el-menu-item>
			</el-sub-menu>
			<el-sub-menu index="knowledgegraph">
				<template #title>元数据知识图谱构建</template>
				<el-menu-item index="graph_build">图谱构建</el-menu-item>
				<el-menu-item index="graph_update">图谱更新</el-menu-item>
				<el-menu-item index="graph_alignment">图谱对齐</el-menu-item>
			</el-sub-menu>
		</el-sub-menu>

		<!-- <el-sub-menu index="3">
			<template #title>
				<el-icon>
					<Menu />
				</el-icon>
				<span>敏捷服务构建</span>
			</template>
			<el-menu-item index="1-1">新建服务</el-menu-item>
			<el-menu-item index="1-2">已有服务</el-menu-item>
			<el-menu-item-group title="Group Two">
				<el-menu-item index="1-3">item three</el-menu-item>
			</el-menu-item-group>
			<el-sub-menu index="1-4">
				<template #title>item four</template>
				<el-menu-item index="1-4-1">item one</el-menu-item>
			</el-sub-menu>
		</el-sub-menu> -->
		<!-- <el-menu-item index="4" disabled>
			<el-icon>
				<setting />
			</el-icon>
			<span>Task Four</span>
		</el-menu-item> -->
	</el-menu>
</template>
  
<script lang="ts" setup>
import { Position } from '@element-plus/icons-vue';
import { ref, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const activeIndex = ref("")

watch(route, () => {
	console.log(route.matched);
	console.log(route.matched[route.matched.length - 1].name);
	activeIndex.value = String(route.matched[route.matched.length - 1].name)
})
const handleSelect = (key: string) => {
	// console.log(key)
	router.push({ name: key })
}   
</script>
